import React from 'react'
import Component, { mapStateToProps, mapDispatchToProps } from '@components/Component'
import { connect } from 'react-redux'
import { Skeleton, message } from 'antd'
import ReactEchartsCore from 'echarts-for-react/lib/core'
import * as echarts from 'echarts/core'
import { BarChart, LineChart } from 'echarts/charts'
import { TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import moment from 'moment'
import PropTypes from 'prop-types'
import style from './Week.module.less'
echarts.use([BarChart, LineChart, CanvasRenderer, TooltipComponent])
class WeekAccept extends Component {
  state = {
    monday: Date.now(),
    nextMonday: Date.now(),
    weekAcceptLoading: false,
    weekAcceptCaseNum: 0,
    weekAcceptAmount: 0,
    weekAcceptFee: 0,
    weekRegisteryCaseList: [0, 0, 0, 0, 0, 0, 0]
  }

  formatMoney (money) {
    const m = String(money)
    if (!/^\d*$/.test(m)) {
      return m
    }
    return m.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
  }

  // 初始化星期一和星期日的时间戳,并获取数据
  initWeekDayAndGetData () {
    const time = moment(moment().format('YYYY-MM-DD'))
    const d = time.day()
    time.subtract(d, 'd')
    const monday = Math.floor(time.valueOf() / 1000)
    time.add(6, 'd')
    time.hour(23)
    time.minute(59)
    time.second(59)
    const nextMonday = Math.floor(time.valueOf() / 1000)
    this.setState({
      monday,
      nextMonday
    }, () => {
      this.getWeekAccept()
    })
  }

  // 获取周收案情况
  getWeekAccept () {
    this.setState({ weekAcceptLoading: true })
    this.$get('/api/xapc/casestat', {
      begintime: this.state.monday,
      endtime: this.state.nextMonday,
      type: 'accept_datetime',
      group: 'date',
      field: 'caseno,amountsum,feesum'
    }).then(res => {
      this.setState({ weekAcceptLoading: false })
      if (res.status === 1) {
        const { total, list } = res.data
        this.setState({
          weekRegisteryCaseList: list.map(li => li.caseno),
          weekAcceptCaseNum: total.caseno || 0,
          weekAcceptAmount: total.amountsum || 0,
          weekAcceptFee: total.feesum || 0
        })
      } else {
        message.warning(res.message)
      }
    }).catch(() => this.setState({ weekAcceptLoading: false }))
  }

  getFirstChartOption () {
    return {
      xAxis: {
        type: 'category',
        data: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
        show: false
      },
      yAxis: {
        type: 'value',
        show: false
      },
      tooltip: {},
      series: [{
        data: this.state.weekRegisteryCaseList.map(v => {
          const obj = {
            value: v
          }
          if (v <= 0) {
            obj.itemStyle = {
              color: '#EEEFF2',
              borderRadius: [0, 0, 0, 0]
            }
          }
          return obj
        }),
        type: 'bar',
        barCategoryGap: '50%',
        barMinHeight: 8,
        itemStyle: {
          borderRadius: [6, 6, 0, 0]
        },
        color: '#FF9B37'
      }]
    }
  }

  // 查看详情
  chartClickHandle (e) {
    const weekList = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    if (e.seriesType === 'bar') {
      const index = weekList.indexOf(e.name)
      const date = moment(this.state.monday * 1000)
      date.add(index, 'd')
      const meta = {
        formData: {
          beginTime: moment(date),
          endTime: moment(date),
          type: 'accept_datetime'
        }
      }
      this.props.addWindow({ id: 'AllCaseManage', title: '仲裁案件列表', componentName: 'AllCaseManage', forceRefresh: true, meta })
    }
  }

  componentDidMount () {
    this.initWeekDayAndGetData()
  }

  render () {
    const { weekAcceptLoading } = this.state
    const onEvents = { click: this.chartClickHandle.bind(this) }
    return (
      <div className={style['header-block']}>
        <Skeleton active loading={weekAcceptLoading}>
          <div className={style['header-block__cell']}>
            <div className={style['header-block__cell--left']}>
              <div className={style.title}>周实时收案</div>
              <div className={style.num}>{this.state.weekAcceptCaseNum}</div>
              <div className={style.chart}>
                {this.props.ready ? <ReactEchartsCore echarts={echarts} option={this.getFirstChartOption()} onEvents={onEvents} style={{ width: '100%', height: '100%' }} /> : null}
              </div>
            </div>
          </div>
          <div className={style['header-block__cell']}>
            <div className={style['header-block__cell--right']}>
              <div className={style.cell}>
                <div className={style.title}>总标的</div>
                <div className={style.money}>￥{this.formatMoney(this.state.weekAcceptAmount)}</div>
              </div>
              <div className={style.cell}>
                <div className={style.title}>总仲裁费</div>
                <div className={style.money}>￥{this.formatMoney(this.state.weekAcceptFee)}</div>
              </div>
            </div>
          </div>
        </Skeleton>
      </div>
    )
  }
}

WeekAccept.propTypes = {
  ready: PropTypes.bool
}

WeekAccept.defaultProps = {
  ready: false
}

const mapState = mapStateToProps(function (state) {
  return {
    uncompleteNum: state.basic.uncompleteNum
  }
})

const mapDispatch = mapDispatchToProps(function (dispatch) {
  return {

  }
})

export default connect(mapState, mapDispatch)(WeekAccept)
